<script setup lang="ts">
interface props {
	icon: string;
	title: string;
}
const props = defineProps<props>();
</script>

<template>
	<div class="card-box">
		<div class="title-box">
			<img :src="props.icon" alt="" class="icon" />
			<span class="title">{{ props.title }}</span>
		</div>
		<slot />
	</div>
</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";
.card-box {
	width: 320px;
	// min-height:100px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	.title-box {
		height: 50px;
		border-bottom: 3px solid rgb(1, 180, 172);
		background-color: rgb(242, 244, 243);
		.flex(row,flex-start,center);
		.icon {
			height: 20px;
			width: 20px;
			margin-left: 20px;
		}
		.title {
			margin-left: 5px;
		}
	}
}
</style>
